"use client";

import Logo from "./imgs/logo.svg";
import LogoWhite from "./imgs/logo-white.svg";
import Image from "next/image";
import MenuIcon from "../MenuIcon";
import ProcessLink from "../ProcessLink";
import { useState } from "react";
import { usePathname } from "next/navigation";
import { navItems } from "@/consts";
import { observer } from "mobx-react-lite";
import store from "@/store";
import styles from "./style.module.scss";

const Header: React.FC = observer(() => {
  const [isMenuActive, setIsMenuActive] = useState(false);
  const pathname = usePathname();
  return (
    <header className="flex fixed items-center top-0 left-0 right-0  z-[100] pt-[48px] pb-[12px] px-[48px]">
      <a href="">
        <Image src={LogoWhite} alt="aa" className="w-[34px] h-[34px]" />
      </a>
      <nav className="flex-1">
        <ul
          className={`flex justify-center items-center text-[10px] md:text-[12px] md:flex lg:text-[15px] lg:flex tracking-[2px] ${styles["nav"]}`}
        >
          <li className="px-[14px] md:px-[12px]">
            <ProcessLink
              active={"/" === pathname}
              isProcess={true}
              href="/"
              process={Number(store.introductionProcess.toFixed(2))}
            >
              INTRODUCTION
            </ProcessLink>
          </li>

          <li className="px-[14px]">
            <ProcessLink
              active={"/technology" === pathname}
              isProcess={false}
              href="/technology"
            >
              THE TECHNOLOGY
            </ProcessLink>
          </li>

          <li className="px-[14px]">
            <ProcessLink
              active={"/spotlight" === pathname}
              isProcess={true}
              href="/spotlight"
            >
              TECH SPOTLIGHT
            </ProcessLink>
          </li>

          <li className="px-[14px]">
            <ProcessLink
              active={"/whymusic" === pathname}
              isProcess={false}
              href="/whymusic"
            >
              WHY MUSIC?
            </ProcessLink>
          </li>
        </ul>
      </nav>
      <MenuIcon
        onClick={() => {
          setIsMenuActive(!isMenuActive);
        }}
        active={isMenuActive}
      ></MenuIcon>
    </header>
  );
});

export default Header;
